<template>
  <div class="header-view row" flex>
    <!-- left -->
    <div class="col-6" flex="cross:center">
      <div style="width:200px;">
        <div flex="cross:center" @click="gotoHome" @dblclick="maxmin">
          <div class="logo cursor-pointer no-drag" >
            <img src="~@/assets/img/logo.jpg" alt />
          </div>
          <h1 class="app-title cursor-pointer no-drag">我的云音乐</h1>
        </div>
      </div>
      <div>
        <el-button icon="el-icon-arrow-left" @click="back"></el-button>
        <el-button icon="el-icon-arrow-right" @click="forward"></el-button>
      </div>
      <Search />
    </div>
    <!-- right  -->
    <div class="col-6" flex="dir:right cross:center">
      <div flex="cross:center">
        <el-button icon="el-icon-setting"></el-button>
        <i class="vertical-line"></i>
        <el-button icon="el-icon-minus" @click="minimize"></el-button>
        <el-button @click="maxmin">
          <i v-if="isMaximize" class="el-icon-copy-document" style="transform:rotateZ(180deg)"></i>
          <i class="maximize" v-else></i>
        </el-button>
        <el-button icon="el-icon-close" @click="close"></el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Search from './search'
export default {
  components: {
    Search
  },
  data() {
    return {
      isMaximize: false
    }
  },
  methods: {
    gotoHome() {
      if (this.$router.currentRoute.name !== 'music') {
        this.$router.push({ name: 'music' })
      }
    },
    minimize() {
      this.$electron.ipcRenderer.send('minimize')
    },
    close() {
      this.$electron.ipcRenderer.send('close')
    },
    maxmin() {
      this.$electron.ipcRenderer.send('maxmin')
      this.$nextTick(() => {
        this.isMaximize = !this.isMaximize
      })
    },
    forward() {
      this.$router.go(1)
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss">
.vertical-line {
  display: inline-block;
  width: 1px;
  height: 25px;
  margin: 0 10px;
  background-color: rgba($color: #000000, $alpha: 0.2);
}
.header-view {
  .logo {
    margin-right: 10px;
    border-radius: 50%;
    overflow: hidden;
  }
  .logo img {
    width: 25px;
    height: 25px;
  }
  .app-title {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    font-family: '微软雅黑';
  }
  height: 100%;
  .el-button {
    -webkit-app-region: no-drag;
    font-size: 18px;
    padding: 8px 0;
    .maximize {
      display: inline-block;
      height: 13px;
      width: 15px;
      border: 1px solid;
      border-radius: 2px;
    }
  }
  .el-button:focus,
  .el-button:hover,
  .el-button {
    color: #bbb;
    border: none;
    background-color: transparent;
  }
  .el-button:hover {
    color: #fff;
  }
}
</style>